<template>
    <div>
        <div id="word-cloud" class='tl-width-100-percent tl-height-400'></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts-wordcloud';
import { list } from '@/api/category/category';

export default {
    name: 'WordCloud',
    components: {},
    data () {
        const wordCloudOption = {
            tooltip: {
                show: true,
                position: 'top',
                textStyle: {
                    fontSize: 16,
                    fontFamily: ['Courier New', '等线']
                }
            },
            series: [{
                type: 'wordCloud',
                // 网格大小，各项之间间距
                gridSize: 30,
                // 形状 circle 圆，cardioid  心， diamond 菱形，
                // triangle-forward 、triangle 三角，star五角星
                shape: 'circle',
                // 字体大小范围
                sizeRange: [10, 40],
                autoSize: { enable: true, minSize: 18 },
                // 文字旋转角度范围
                rotationRange: [0, 0],
                // 旋转步值
                rotationStep: 90,
                // 自定义图形
                // maskImage: maskImage,
                left: 'center',
                top: 'center',
                right: null,
                bottom: null,
                // 画布宽
                width: '90%',
                // 画布高
                height: '80%',
                // If perform layout animation.
                // NOTE disable it will lead to UI blocking when there is lots of words.
                layoutAnimation: true,
                // 是否渲染超出画布的文字
                drawOutOfBound: false,
                // Color can be a callback function or a color string
                textStyle: {
                    // Random color
                    color: () => {
                        return 'rgb(' + [
                            Math.round(Math.random() * 200 + 55),
                            Math.round(Math.random() * 200 + 55),
                            Math.round(Math.random() * 200 + 55)
                        ].join(',') + ')';
                    },
                    fontFamily: ['Courier New', '等线']
                },
                emphasis: {
                    focus: 'self'
                },
                data: []
            }]
        };
        return {
            wordCloudOption,
            cate: []
        }
    },
    methods: {
        async getTypeList () {
            const res = await list();
            if (res.code === 200) {
                this.cate = res.data.rows;
            }
        }
    },
    created () {
    },
    mounted () {
        this.$nextTick(() => {
            const wordCloudChart = echarts.init(document.getElementById('word-cloud'));
            this.getTypeList().then(() => {
                this.wordCloudOption.series[0].data = this.cate
                // 使用刚指定的配置项和数据显示图表。
                wordCloudChart.setOption(this.wordCloudOption);
                wordCloudChart.resize({
                    width: 989
                })
            })
        })
    }
}
</script>

<style lang='less' scoped>

</style>
